<script setup>
import { ref } from "vue";
import {
    getMemberInfoService,
    registerMemberService
} from '../../api/operation';

// 将memberInfo定义为数组，以便与<el-table>配合使用
const memberInfo = ref({
    memberId: 0, // assuming default to 0
    userId: 0, // assuming default to 0
    joinDate: null, // or use a date library to initialize a date
    levelId: 0, // assuming default to 0
    totalPoints: 0 // assuming default to 0
});


const getMemberInfo = async () => {
    let result = await getMemberInfoService();
    if (result.code === 200) {
        // 假设result.data是一个对象，包含会员信息
        memberInfo.value = result.data;
    }
};
getMemberInfo();

const registerMember = async () => {
    let result = await registerMemberService(); // 确保这里传递了正确的参数
    if (result.code === 200) {
        alert("注册成功");
    }

    getMemberInfo(); // 重新获取会员信息
};
</script>

<template>
    <el-card>
        <template #header>
            <div class="header">
                <span>会员信息</span>
            </div>
        </template>

        <el-form>
            <el-form-item>
                <el-button type="primary" @click="registerMember">注册会员</el-button>
            </el-form-item>
        </el-form>

        <!-- 表单渲染会员信息 -->

        <el-form label-position="right" label-width="100px" style="max-width: 600px;">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="会员ID">
                        {{ memberInfo.memberId }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="加入日期">
                        {{memberInfo.joinDate}}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="会员等级">
                        {{ memberInfo.levelId }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="总积分">
                        {{ memberInfo.totalPoints }}
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>




    </el-card>
</template>

<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

/* 抽屉样式 */
.avatar-uploader {
    :deep() {
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }

        .el-upload {
            border: 1px dashed var(--el-border-color);
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: var(--el-transition-duration-fast);
        }

        .el-upload:hover {
            border-color: var(--el-color-primary);
        }

        .el-icon.avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            text-align: center;
        }
    }
}

.el-form-item {
    margin-bottom: 20px;
    /* 增加表单项之间的间距 */
}

.el-row {
    margin-bottom: 20px;
    /* 增加行之间的间距 */
}
</style>
